<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Vector3,
  LineBasicMaterial,
  Geometry,
  Line,
  DirectionalLight,
} from 'three'

import Detector from 'three/examples/js/Detector'
export default {
  template: '<div style="width: 100%; height: 100%"></div>',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
      ele: null
    }
  },
  mounted() {
    this.ele = this.$el

    if (Detector.webgl) {
      this.init()
    } else {
      const warning = Detector.getWebGLErrorMessage()
      this.ele.appendChild(warning)
    }
  },
  methods: {
    init() {
      const width = this.ele.clientWidth
      const height = this.ele.clientHeight
      this.renderer = new WebGLRenderer({
        antialias : true
      })
      this.renderer.setSize(width, height)
      this.ele.appendChild(this.renderer.domElement)
      this.renderer.setClearColor(0xffffff, 1)

      this.camera = new PerspectiveCamera(45, width / height, 1, 10000)
      this.camera.position.set(0, 1000, 0)
      this.camera.up.set(0, 0, 1)
      this.camera.lookAt(new Vector3(0, 0, 0))

      this.scene = new Scene()

      const light = new DirectionalLight(0xff0000, 1, 0)
      light.position.set(100, 100, 200)
      this.scene.add(light)

      const geometry = new Geometry()
      geometry.vertices.push(new Vector3(-500, 0, 0))
      geometry.vertices.push(new Vector3(500, 0, 0))

      for (let i = 0; i <= 20; i++) {
        const vline = new Line(geometry, new LineBasicMaterial({
          color: 0x000000, opacity: 0.2
        }))
        vline.position.z = (i * 50) - 500
        this.scene.add(vline)

        const hLine = new Line(geometry, new LineBasicMaterial({
          color: 0x000000, opacity: 0.2
        }))
        hLine.position.x = ( i * 50 ) - 500
        hLine.rotation.y = 90 * Math.PI / 180
        this.scene.add(hLine)
      }

      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>